<!--
 Copyright (c) 2018
 Mainflux

 SPDX-License-Identifier: Apache-2.0
-->

<div class="container" style="height: 80vh" fxLayoutAlign="center center">
  <form fxLayout="column" [formGroup]="signupForm" (ngSubmit)="signup()" fxFlex="30%" fxFlex.sm="70%" fxFlex.xs="90%">
    <mat-card>
      <mat-card-title>Signup</mat-card-title>
      <mat-card-content class="loginCard" fxLayout="column" fxLayoutAlign="space-evenly">
        <mat-form-field fxFlex="40%">
          <input type="text" required matInput placeholder="Email" formControlName="email"/>
          <mat-error *ngIf="signupForm.get('email').errors?.required">
            Email is required
          </mat-error>
          <mat-error *ngIf="signupForm.get('email').errors?.email">
            Email must be valid
          </mat-error>
        </mat-form-field>
        <mat-form-field fxFlex="30%" formGroupName="passwords">
          <input type="password" required matInput placeholder="Password" formControlName="password" />
          <mat-error *ngIf="signupForm.get('passwords.password').errors?.required">
            Password is required
          </mat-error>
        </mat-form-field>
        <mat-form-field fxFlex="30%" formGroupName="passwords">
          <input type="password" required matInput placeholder="Repeat password" formControlName="repeatPassword" />
          <mat-error *ngIf="signupForm.get('passwords.repeatPassword').errors?.required">
            Repeat the password
          </mat-error>
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions fxLayout="column">
        <button type="submit" [disabled]="signupForm.invalid" mat-raised-button color="primary" class="large-button">Signup</button>
        <a mat-button (click)="login()">Login</a>
      </mat-card-actions>
    </mat-card>
  </form>
</div>